<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <title>电子名片</title>
    <link rel="stylesheet" href="../common/css/reset.css" />
    <link rel="stylesheet" href="../common/css/common-m.css" />
    <link rel="stylesheet" href="./css/index-vw.css" />
    <!-- <link rel="stylesheet" href="./css/index.css" /> -->
  </head>
  <body>
    <div class="gradient"></div>
    <div class="page-container">
      <div class="fixed-top">
        <!-- 头部 -->
        <header class="header flex center">
          <p class="page-title">电子名片</p>
          <img src="./images/icon-back.png" class="icon-back" />
        </header>
      </div>
      <!-- 名片 -->
      <section class="section-card flex center">
        <div class="button-box flex">
          <a href="/m-card-edit/index.html" class="button edit flex center">
            <img src="./images/icon-edit.png" class="icon-edit" />
            编辑
          </a>
          <div class="button" onclick="rotateCard()">
            <img src="./images/icon-rotate.png" class="icon-rotate" />
          </div>
        </div>
        <div class="card-container">
          <!-- 正面  -->
          <div class="card-box card-front flex column between">
            <div class="card-top">
              <div class="flex align-end">
                <p class="text-name ellipsis">某某某某某某某某某某某某</p>
                <p class="text-position ellipsis">建筑工程师｜营销师</p>
              </div>
              <p class="text-company ellipsis">中铁四十三局第五分公司</p>
            </div>
            <div class="card-bottom w100">
              <div class="flex">
                <img src="./images/icon-phone.png" class="card-icon" />
                <p class="text text-phone ellipsis">18632123176</p>
              </div>
              <div class="flex align-start w100">
                <img
                  src="./images/icon-pos.png"
                  class="card-icon icon-address"
                />
                <p class="text text-address">
                  河北省 石家庄市 长安区河北省 石家庄市 长安区 河北省 石家庄市
                  长安区河北省 石家庄市 长安区
                </p>
              </div>
            </div>
          </div>
          <!-- 反面  -->
          <div class="card-box card-back flex column center">
            <p class="text-title">公司主营</p>
            <p class="text-desc ellipsis-6">
              采购230w-采购230w-680w单、多晶正A级组件、降级组件、低债组件、客退组件、拆卸组件、层压件、工程剩余组件、报废组件、电站全套报价
            </p>
          </div>
        </div>
      </section>
      <div
        class="button button-blue button-send"
        onclick="sendCard('某某某某某某某某某 建筑工程师建筑工程师建筑工程师 电子名片', 'http://10.10.9.142:5501/businessCard-m/')"
      >
        发名片
      </div>
      <section class="section-list">
        <div class="flex between">
          <div class="section-title">我的商友录</div>
          <div class="text-more">更多</div>
        </div>
        <div class="list">
          <div class="item flex between">
            <div class="left">
              <div class="flex align-end">
                <div class="text-name ellipsis">
                  黄先生黄先生黄先生黄先生黄先生黄先生
                </div>
                <div class="text-position ellipsis">
                  建筑工程师建筑工程师建筑工程师建筑工程师
                </div>
              </div>
              <div class="text-company ellipsis">
                中废通网络技术有限公司中废通网络技术有限公司中废通网络技术有限公司
              </div>
            </div>
            <!-- 有在线聊天权限 -->
            <!-- <a
              href="https://www.feijiu.net"
              class="button button-blue button-contact"
            >
              立即联系
            </a> -->
            <!-- 没有在线聊天权限弹留言弹窗,传入uid -->
            <div
              class="button button-blue button-contact"
              onclick="openMessagePopup('11111')"
            >
              立即联系
            </div>
          </div>
          <div class="item flex between">
            <div class="left">
              <div class="flex align-end">
                <div class="text-name ellipsis">黄先生</div>
                <div class="text-position ellipsis">建筑工程师</div>
              </div>
              <div class="text-company ellipsis">中废通网络技术有限公司</div>
            </div>
            <a
              href="https://www.feijiu.net"
              class="button button-blue button-contact"
            >
              立即联系
            </a>
          </div>
          <div class="item flex between">
            <div class="left">
              <div class="flex align-end">
                <div class="text-name ellipsis">黄先生</div>
                <div class="text-position ellipsis">建筑工程师</div>
              </div>
              <div class="text-company ellipsis">中废通网络技术有限公司</div>
            </div>
            <a
              href="https://www.feijiu.net"
              class="button button-blue button-contact"
            >
              立即联系
            </a>
          </div>
        </div>
      </section>
      <section class="section-list list2">
        <div class="flex between">
          <div class="section-title">添加商友</div>
          <div class="text-more">更多</div>
        </div>
        <div class="list">
          <div class="item flex between">
            <div class="left">
              <div class="flex align-end">
                <div class="text-name ellipsis">黄先生</div>
                <div class="text-position ellipsis">建筑工程师</div>
              </div>
              <div class="text-company ellipsis">中废通网络技术有限公司</div>
            </div>
            <a
              href="https://www.feijiu.net"
              class="button button-blue button-contact"
            >
              加为商友
            </a>
          </div>
          <div class="item flex between">
            <div class="left">
              <div class="flex align-end">
                <div class="text-name ellipsis">黄先生</div>
                <div class="text-position ellipsis">建筑工程师</div>
              </div>
              <div class="text-company ellipsis">中废通网络技术有限公司</div>
            </div>
            <a
              href="https://www.feijiu.net"
              class="button button-blue button-contact"
            >
              加为商友
            </a>
          </div>
          <div class="item flex between">
            <div class="left">
              <div class="flex align-end">
                <div class="text-name ellipsis">黄先生</div>
                <div class="text-position ellipsis">建筑工程师</div>
              </div>
              <div class="text-company ellipsis">中废通网络技术有限公司</div>
            </div>
            <a
              href="https://www.feijiu.net"
              class="button button-blue button-contact"
            >
              加为商友
            </a>
          </div>
        </div>
      </section>
    </div>

    <!-- 发名片 -->
    <div id="popupCard" class="popup-container" hidden>
      <div class="popup-mask">
        <div class="popup-body">
          <div class="popup-header flex between">
            <h3>发名片</h3>
            <div class="popup-close" onclick="closePopup('popupCard')">×</div>
          </div>
          <div class="popup-content">
            <div class="qrcode-box">
              <div id="qrcode"></div>
            </div>
          </div>
          <p class="popupCard-tip">长按保存图片</p>
          <!-- <button
            class="primary"
            onclick="onDownload('某某某某某某某某某 建筑工程师建筑工程师建筑工程师 电子名片')"
          >
            保存图片
          </button> -->
          <!-- <button class="primary" onclick="closePopup('popupCard')">
            确定
          </button> -->
        </div>
      </div>
    </div>

    <!-- 留言弹窗 -->
    <div id="popupMessage" class="popup-container bottom popupMessage" hidden>
      <div class="popup-mask">
        <div class="popup-body">
          <div class="popup-header flex">
            <h3 class="popup-title">留言询盘</h3>
            <div class="close" onclick="closePopup('popupMessage')">
              &times;
            </div>
          </div>
          <div class="popup-content">
            <form class="form message">
              <div class="form-item input">
                <label for="name">联系人</label>
                <input type="text" placeholder="请输入联系人姓名" name="name" />
              </div>
              <div class="form-item input">
                <label for="phone">联系电话</label>
                <input type="text" placeholder="请输入联系电话" name="phone" />
              </div>
              <div class="form-item textarea">
                <label for="desc">补充内容</label>
                <textarea
                  id="desc"
                  placeholder="填写想要了解的物资信息，如产品规格、价格、数量等"
                  name="desc"
                  maxlength="200"
                  oninput="updateTextCount()"
                ></textarea>
                <div class="text-count"><span id="descCount">0</span>/200</div>
              </div>
              <div class="form-item">
                <div class="button primary" onclick="onSubmitMessage()">
                  提交留言
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

    <div id="toast" class="toast" hidden></div>

    <script src="../common/js/jquery-3.2.1.min.js"></script>
    <script src="./js/qrcode.min.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>
